<template>
  <div class="my">
    <!-- 头部 -->
    <div class="head">
      <van-row>
        <van-col :span="18"
          ><div class="head-box head-btn" style="padding-top:28px;">
            <div class="nameData">
              <span class="user ">
                {{ userInfo.nickname }}
              </span>
            </div>
            <div class="introduce" >
              {{ userInfo.intro }}
            </div>
          </div></van-col
        >
        <van-col :span="4">
          <div class="img">
            <img
              @click="$router.push('/user')"
              :src="baseUrl + userInfo.avatar"
              alt=""
            /></div
        ></van-col>
      </van-row>
      <van-row type="flex" justify="center" class="answer">
        <van-col :span="6"
          ><div class="head-box">
            <span class="user son sone"> {{ userInfo.submitNum }} </span><br />
            <span class="introduce son">累计答题</span>
          </div></van-col
        >
        <van-col :span="6"
          ><div class="head-box">
            <span class="user son sone" v-if="userInfo.collectQuestions">{{
              userInfo.collectQuestions.length
            }}</span
            ><br />
            <span class="introduce son">收藏题目</span>
          </div></van-col
        >
        <van-col :span="6"
          ><div class="head-box">
            <span class="user son sone" v-if="userInfo.errorQuestions">
              {{ userInfo.errorQuestions.length }} </span
            ><br />
            <span class="introduce son">我的错误</span>
          </div></van-col
        >
        <van-col :span="6"
          ><div class="head-box">
            <span class="user son sone" v-if="userInfo.errorQuestions">
              {{
                (userInfo.submitNum - userInfo.starComments[4]) %
                  userInfo.errorQuestions.length
              }}% </span
            ><br />
            <span class="introduce son mean">正确率</span>
          </div></van-col
        >
      </van-row>
    </div>
    <!-- 我的岗位 -->
    <div class="post" @click="position">
      <van-cell :value="userInfo.position" size="large">
        <template #title> <span class="station">我的岗位</span> </template>
        <template #icon>
          <i class="iconfont iconicon_mine_gangwei"></i>
        </template>
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </div>
    <!-- 面经数据 -->
    <div class="surface">
      <span class="surfaces">面经数据</span>
    </div>
    <van-row style="margin-bottom:25px">
      <van-row type="flex" justify="center" class="read">
        <van-col :span="6">
          <div class="Mozin top">
            昨日阅读<span v-if="userInfo.shareData">
              +{{ userInfo.shareData.read.yesterday }}
            </span>
          </div>
          <span class="Mozin sum number" v-if="userInfo.shareData">
            {{ userInfo.shareData.read.total }}
          </span>
          <div class="Mozin button">阅读总数</div>
        </van-col>
        <van-col :span="8">
          <div class="Mozin top">
            昨日获赞
            <span v-if="userInfo.shareData">
              +{{ userInfo.shareData.star.yesterday }}
            </span>
          </div>
          <span class="Mozin sum sumes" v-if="userInfo.shareData">
            {{ userInfo.shareData.star.total }}
          </span>
          <div class="Mozin button">点赞总数</div>
        </van-col>
        <van-col :span="6">
          <div class="Mozin top">
            昨日新增
            <span v-if="userInfo.shareData">
              +{{ userInfo.shareData.comment.yesterday }}
            </span>
          </div>
          <span class="Mozin sum" v-if="userInfo.shareData">
            {{ userInfo.shareData.comment.total }}
          </span>
          <div class="Mozin button">评论总数</div>
        </van-col>
      </van-row>
    </van-row>
    <!-- 我的分享 -->
    <div class="share">
      <van-cell
        title="我的面经分享"
        v-if="userInfo.starComments"
        :value="userInfo.starComments[0]"
        size="large"
        icon="shop-o"
      >
        <template #icon>
          <i class="iconfont iconicon_mine_mianjing"></i>
        </template>
        <template #right-icon> <van-icon name="arrow" /> </template>
      </van-cell>
      <van-cell
        @click="$router.push('/information')"
        title="我的信息"
        size="large"
        icon="shop-o"
        v-if="messaged"
        :value="messaged.length"
      >
        <template #icon>
          <i class="iconfont iconicon_mine_xiaoxi"></i>
        </template>
        <template #right-icon> <van-icon name="arrow" /> </template
      ></van-cell>
      <van-cell
        title="收藏的题库"
        v-if="userInfo.starComments"
        :value="userInfo.starComments[2]"
        size="large"
        icon="shop-o"
      >
        <template #icon>
          <i class="iconfont iconicon_mine_tikushoucang"></i>
        </template>
        <template #right-icon> <van-icon name="arrow" /> </template
      ></van-cell>
      <van-cell
        title="收藏的企业"
        size="large"
        v-if="userInfo.starComments"
        :value="userInfo.starComments[3]"
        icon="shop-o"
      >
        <template #icon>
          <i class="iconfont iconicon_mine_qiyeshoucang"></i>
        </template>
        <template #right-icon> <van-icon name="arrow" /> </template
      ></van-cell>
      <van-cell
        title="我的错题"
        v-if="userInfo.starComments"
        :value="userInfo.starComments[4]"
        size="large"
      >
        <template #icon>
          <i class="iconfont iconicon_mine_cuoti"></i>
        </template>
        <template #right-icon> <van-icon name="arrow" /> </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
// 操作token(获取当前用户的token)
import { getLocal } from '@/utils/local.js'
import { messages } from '@/api/my.js'
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    this.messaGes()
    // this.Local()
  },
  data () {
    return {
      // 定义基地址来存储当前用户的头像
      baseUrl: process.env.VUE_APP_URL,
      messaged: []
    }
  },
  methods: {
    // 对象展开运算符
    ...mapActions(['setUserInfo']),
    // 修改岗位
    position () {
      // 跳转页面
      this.$router.push('/panel/?id=position')
    },
    async messaGes () {
      var res = await messages()
      this.messaged = res.data
    },
    // 判断获取是不是登录状态 如果不是则停止登录页面
    Local () {
      // 获取当前的token
      var token = getLocal()
      if (!token) {
        // 跳转登录页面
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my {
  position: relative;
  .head {
    height: 220px;
    background-color: #ca0131;
    .img {
      position: relative;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin: 30px 10px 0;
      border: 2px solid #f4696b;
      img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 90%;
        height: 90%;
        margin: 2px auto;
        border-radius: 50%;
      }
    }
  }
  .head-btn {
    margin: 5px 0 0 14px;
  }
  .head-box {
    position: relative;
    .nameData {
      width: 100px !important;
      .user {
        display: inline-block;
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
      }
    }
    .introduce {
      width: 150px;
      font-size: 14px;
      opacity: 0.7;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .answer {
    position: absolute;
    top: 100px;
    padding: 0 5px;
    width: 100%;
    text-align: center;
  }
  .son {
    width: 60px;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-left: -27px;
  }
  .mean {
    margin-left: -35px;
  }
  .sone {
    margin-left: -3px;
  }
  .post {
    position: absolute;
    top: 181px;
    left: 18px;
    height: 50px;
    width: 340px;
    overflow: hidden;
    /deep/.van-cell__value {
      max-width: 100px;
      position: relative;
      overflow: hidden;
      color: #969799;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /deep/.van-cell--large {
      border-radius: 10px 10px 0 0;
    }
    .station {
      font-size: 14px;
      // margin-top: 10px;
      padding-top: 10px;
    }
  }
  .surface {
    margin: 30px 0 10px 30px;
    .surfaces {
      font-size: 14px;
      font-weight: 600;
    }
  }
  .read {
    .Mozin {
      text-align: center;
    }
    .sum {
      font-size: 20px;
      font-weight: 700;
      margin: 6px 0 0 40px;
    }
    .sumes {
      margin: 6px 0 0 55px;
    }
    .top {
      font-size: 14px;
      color: #b4b4bd;
      span {
        color: skyblue;
      }
    }
    .button {
      font-size: 14px;
      color: #545671;
    }
    .number {
      margin-left: 35px;
    }
  }
  .share {
    height: 360px;
    padding: 15px 15px;
  }
  // 箭头
  .van-icon-arrow::before {
    margin: 5px 0 0 8px;
  }
  .my[data-v-3b1d85d9] .van-cell--large .van-cell__title {
    font-size: 0.37333rem;
    margin-top: 1px;
    color: #323232;
  }
  /deep/.iconicon_mine_gangwei:before {
    margin-right: 10px;
    font-size: 22px;
  }
  /deep/.iconicon_mine_mianjing:before,
  /deep/.iconicon_mine_xiaoxi:before,
  /deep/.iconicon_mine_tikushoucang:before,
  /deep/.iconicon_mine_qiyeshoucang:before,
  /deep/.iconicon_mine_cuoti:before {
    font-size: 22px;
    margin-right: 10px;
  }
  /deep/.van-cell--large .van-cell__title {
    font-size: 14px;
    margin-top: 5px;
    color: #323232;
  }
}
</style>
